<script setup lang="ts">
import { computed, getCurrentInstance } from "vue";
import useUserStore from "@/pinia/user";
import useSystemStore from "@/pinia/system";

const curIns = getCurrentInstance()?.proxy;
const userStore = useUserStore();
const systemStore = useSystemStore();

const options = computed(() => curIns?.$route.meta.breadCrumbList);

const dropdownOptions = computed(() => {
  return [{ name: "退出登录", code: "logout" }];
});

const handleCommand = (command: string) => {
  if (command === "logout") {
    curIns?.$router.push({
      path: "/logout",
    });
  }
};

const isCollapse = computed(() => systemStore.isCollapse);
const handleCollapse = () => {
  systemStore.setCollapse(!isCollapse.value);
};
</script>

<template>
  <div
    class="w-full h-full py-0 px-[10px] box-border bg-white shadow-sm flex flex-row items-center justify-between"
  >
    <div class="left flex flex-row items-center">
      <xt-breadcrumb :options="options" />
      <div
        class="w-[20px] h-[20px] flex flex-row items-center cursor-pointer"
        @click="handleCollapse"
      >
        <i
          class="iconfont icon-zhankai1 !text-[18px]"
          :class="[isCollapse ? 'rotate-0' : 'rotate-180']"
        />
      </div>
    </div>
    <div class="right flex flex-row items-center">
      <xt-dropdown :options="dropdownOptions" @command="handleCommand">
        <span class="mr-[8px]">{{ userStore.userInfo?.name }}</span>
        <xt-avatar :size="56" :src="userStore.userInfo.avatar" />
      </xt-dropdown>
    </div>
  </div>
</template>
